<template>
	<view style="min-height: 100vh;" class="bg-w">
		<view class="comment-header plr30 flex alcenter">
			<view class="award-icon flex center alcenter ft14 text-w">奖</view>
			<view class="ft14 text-theme ml20">评价有机会得优惠券及5-20不等积分奖励</view>
		</view>
		<view class="pd30">
			<view class="box-shadow bdr16 pd30 bg-w">
				<view class="flex">
					<view class="wh80">
						<image class="wh80 bdr8" :src="''"></image>
					</view>
					<view class="ws80 pl30">
						<view class="ft16 text-main">得力炫彩棒蜡笔旋转油画棒…</view>
						<view class="flex space alcenter mt20">
							<view>
								<text class="ft14 text-info">单价：</text>
								<text class="ft14 text-main">￥299</text>
							</view>
							<text class="ft14 text-info">x1</text>
						</view>
						<view v-if="orderType == 0" class="flex space alcenter mt20">
							<view>
								<text class="ft14 text-info">优惠：</text>
								<text class="ft14 text-main">￥5</text>
							</view>
							<view>
								<text class="ft14 text-info">实付：</text>
								<text class="ft18 ftw600 text-theme">￥200</text>
							</view>
						</view> 
						
						<view v-if="orderType == 1" class="flex alcenter mt20">
							<image class="wh20" :src="'icon_diamond'"></image>
							<text class="ft16 ftw600 text-theme ml10">1000 + ￥50</text>
						</view>						
					</view>	
				</view>
			</view>
			
			<view class="flex center alcenter mt60">
				<view class="comment-line"></view>
				<view class="ft16 text-main mr40 ml40">打个分</view>
				<view class="comment-line"></view>
			</view>
			
			<view class="flex alcenter center mt50">
				<unio2o-star-select-big :num="starNum"></unio2o-star-select-big>
			</view>
			
			<view class="mt50 flex wrap">
				
				<view v-for="(item,index) in tags" :key="index" :data-index="index" @click="selectTag" :class="item.select ? 'on' : ''" class="tag-comment-item flex center alcenter">
					{{item.name}}
				</view>
				
			</view>
			
			<view class="comment-content mt50">
				<textarea maxlength="2000"></textarea>
			</view>
			
			<view class="flex wrap mt50">
				<view v-for="(item,index) in commentImg" :key="index" :class=" (index + 1) % 3 == 2 ? 'mr30 ml30' : '' " class="comment-photo-item">
					<image mode="aspectFill" :src="item"></image>
					<view class="iconfont iconbtn_close_black closed"></view>
				</view>
				
				<view class="add-photo flex center alcenter">
					<view class="text-center">
						<view class="iconfont iconbtn_upload text-notice ft32"></view>
						<view class="ft14 text-notice mt20">添加图片</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="comment-footer-h">
			<view class="comment-footer bg-w box-shadow-top">
				<view class="comment-footer-main flex center alcenter plr30">
					<button class="btn-main ft18 ftw600 text-w">发布评价</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import unio2oStarSelectBig from '@/components/base/star/selectBig.vue';
	export default{
		components:{
			unio2oStarSelectBig
		},
		data(){
			return {
				starNum:4,
				orderType:0,
				tags:[
					{name:'人气超赞',select:0},
					{name:'干净整洁',select:0},
					{name:'店家热情',select:0},
					{name:'环境舒适',select:0},
					{name:'性价比低',select:0},
					{name:'服务态度佳',select:0}
				],
				commentImg:[
					this.$config.staticUrl + 'photo/img01@2x.png',
					this.$config.staticUrl + 'photo/img02@2x.png',
					this.$config.staticUrl + 'photo/img03@2x.png',
					this.$config.staticUrl + 'photo/img04@2x.png',
					this.$config.staticUrl + 'photo/img05@2x.png'
				]
			}
		},
		methods:{
			selectTag(e){
				let index = parseInt(e.currentTarget.dataset.index);
				this.tags[index].select = 	this.tags[index].select == 1 ? 0 : 1;
			}
		}
		
	}
</script>

<style>
	
	.comment-footer-h{
		height: calc(144rpx + env(safe-area-inset-bottom));
	}
	
	.comment-footer{
		position: fixed;
		z-index: 100;
		height: calc(144rpx + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		left: 0;
		bottom: 0;
		width: 100%;
	}
	.comment-footer-main{
		height: 144rpx;
	}
	
	
	.add-photo{
		border:2rpx dashed #CCCCCC;
		width: 210rpx;
		height: 210rpx;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
	}
	.comment-photo-item{
		width: 210rpx;
		height: 210rpx;
		border-radius: 8rpx;
		position: relative;
		margin-bottom: 30rpx;
	}
	.comment-photo-item image{
		width: 100%;
		height: 100%;
	}
	.comment-photo-item .closed{
		position: absolute;
		right: 0rpx;
		top:0rpx;
		padding: 10rpx;
		font-size: 40rpx;
		color:#FFFFFF;
		background: rgba(0,0,0,.3);
		z-index: 2;
	}
	.comment-content textarea{
		width: 100%;
		font-size: 32rpx;
		color: #666666;
	}
	.comment-content{
		border: 2rpx solid #cccccc;
		border-radius: 32rpx;
		padding: 30rpx;
	}
	.tag-comment-item{
		height: 80rpx;
		padding: 0 30rpx;
		border-radius: 40rpx;
		background: #F7F7F7;
		font-size: 32rpx;
		color:#666666;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.tag-comment-item.on{
		border:2rpx solid #FF6D00;
		color:#FF6D00;
		background: #FFFFFF;
	}
	.comment-line{
		width: 160rpx;
		height: 2rpx;
		background: #E6E6E6;
	}
	.award-icon{
		width: 48rpx;
		height: 48rpx;
		background: #FF6D00;
		border-radius: 4rpx;
	}
	.comment-header{
		height: 80rpx;
		width: 100%;
		background: #FFF2E2;
	}
</style>